<template>
  <!-- <div class="MvShowContainer"> -->
  <div ref="mvItem" class="mvItem">
    <div class="mvitembox">
      <div class="mvImagbox" @click="toPlayEmit(mvItem.id)">
        <i class="iconfont icon-play"></i>
        <el-image
          lazy
          class="mvImag"
          :src="mvItem.cover ? mvItem.cover : mvItem.imgurl"
          :alt="mvItem.name"
        />
      </div>
      <p class="mvtitle" @click="toPlayEmit(mvItem.id)">
        {{ mvItem.name }}
      </p>
      <p class="mvauthod" @click="toArtistEmit(mvItem.artistId)">
        {{ mvItem.artistName }}
      </p>
      <p class="mvpalynum">
        <i class="iconfont icon-video"></i> {{ mvItem.playCount }}
      </p>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
  // 谢称石
  /*
    示例
    <MvShow
      :width="'20%'" //可不传,默认280px 每一项的宽度,可以是xxxpx , xx%等
      v-for="mvItem in mvList"
      :key="mvItem.id"
      :mvItem="mvItem" // 对象类型,是需要展示的每一项
      @toArtist="toArtist" // 跳转到mv作者页面的事件
      @toPlay="toPlay" // 跳转到mv播放页面的事件
    />
  */
  export default {
    name: "MvShow",
    props: ["width", "mvItem"],
    methods: {
      toPlayEmit(id) {
        this.$emit("toPlay", id);
      },
      toArtistEmit(artistId) {
        this.$emit("toArtist", artistId);
      },
    },
    mounted() {
      if (this.width) {
        this.$refs.mvItem.style.width = this.width;
      }
    },
  };
</script>

<style lang="less" scoped>
  // .MvShowContainer {
  //   width: 100%;
  //   height: 100%;
  // }
  p {
    margin: 0;
  }
  .mvItem {
    box-sizing: border-box;
    width: 280px;
    margin-top: 20px;
    padding-right: 20px;
    .mvImagbox {
      width: 100%;
      height: 126px;
      overflow: hidden;
      border-radius: 3px;
      cursor: pointer;
      position: relative;
      i {
        color: white;
        font-size: 60px;
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 0;
        left: 0;
        margin-top: -30px;
        text-align: center;
        transform: scale(0.5);
        opacity: 0;
        transition: all 0.4s linear;
        // display: none;
        z-index: 2;
      }
      .mvImag {
        width: 100%;
        height: 100%;
        transform: scale(1);
        transition: all 0.4s linear;
      }
      &:hover {
        i {
          // display: block;\
          opacity: 1;
          transform: scale(1);
        }
        .mvImag {
          transform: scale(1.1);
        }
      }
    }
    .mvtitle {
      cursor: pointer;
      margin-top: 15px;
      font-size: 14px;
      color: #333333;
      overflow: hidden;
      display: -webkit-box;
      /* 设置几行溢出隐藏 */
      -webkit-line-clamp: 2;
      /* 告知文本排列方向 */
      -webkit-box-orient: vertical;
    }
    .mvauthod {
      line-height: 24px;
      font-size: 14px;
      color: #999999;
      cursor: pointer;
    }
    .mvpalynum {
      line-height: 24px;
      font-size: 14px;
      color: #999999;
      // margin-bottom: 15px;
      i {
        display: inline-block;
        vertical-align: top;
        line-height: 24px;
        font-size: 24px;
      }
    }
  }
</style>
